<template>
<div style="background:white;">
    <div class="def">
    <div @click="goType(item.goods_type)" v-for="item in goods" :key="item.goods_type_id" class="item">
      <img v-lazy="item.goods_type_pic">
      <div>
          <i class="el-icon-view"></i>
      </div>
    </div>
  </div>
</div>
  
</template>

<script>
import {reqGoodsType} from '../../api'
export default {
    name:'Category',
    data() {
        return {
            goods:[]
        }
    },
    async mounted() {
        this.goods = await reqGoodsType()
    },
    methods: {
        goType(type){
            this.$router.push({path:'/type',query:{type}})
        }
    },
}
</script>

<style scoped>
    .def{
        width: 1200px;
        margin: 0 auto;
        height: 300px;
        overflow: hidden;
        /* background: #F4F4F4; */
        background: white;
    }
    .item{
        overflow: hidden;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin-right: 70px;
        float: left;
        transform:translate(0,25%);
        user-select: none;
        position: relative;
    }
    .item:first-child{
        margin-left: 96px;
    }
    .item > div{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #EEF0F1;
        position:absolute;
        margin:auto;
        top:0;
        left:0;
        right:0;
        bottom:0;
        text-align: center;
        line-height: 30px;
        display: none;
    }
    i{
        color: #c69c6c;
    }
    .item:hover > div{
        cursor: pointer;
        display: block;
    }
</style>